<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="zh-CN">
<!--页头引入-->
<head ms-controller="head">
    <title>{{title}}</title>
    <meta ms-attr-content="{{PageDescription}}" name="Description">
    <meta ms-attr-content="{{PageKeywords}}" name="Keywords">
    <meta charset="UTF-8">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--坑爹的将360默认为极速模式打开-->
    <meta name="renderer" content="webkit">
    <!--移动优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--图标引入-->
    <!--[if lt IE 8]>
    <link href="./src/css/font-awesome-ie7.min.css" rel="stylesheet">
    <![endif]-->
    <link href="./src/css/font-awesome.min.css" rel="stylesheet">
    <link href="./src/css/layout.css" rel="stylesheet">
    <link rel="stylesheet" href="./src/css/mooshroom.css"/>
    <link rel="stylesheet" href="./src/css/banana.css"/>


</head>

<body>
<div class="header">
    <br/>
    <div class="fontStyle">&nbsp;&nbsp;按钮样式</div>
    <h1 style="color: #ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        通过点击按钮获取按钮样式，复制在剪贴板上</h1>
    <br/>
</div>


<div ms-controller="include" class="container">
<div class="row-fluid">
    <div class="span9">
    <!--形状与尺寸-->
    <div ms-include-src="a" id="a"></div>
    <!--带边框和不带边框的按钮-->
    <div ms-include-src="b" id="b"></div>
    <!--3D 按钮-->
    <div ms-include-src="c"  id="c"></div>
    <!--突起样式的按钮-->
    <div ms-include-src="d"  id="d"></div>
    <!--长阴影-->
    <div ms-include-src="e"  id="e"></div>
    <!--光晕效果-->
    <div ms-include-src="f"  id="f"></div>
    <!--堆叠按钮-->
    <div ms-include-src="g"  id="g"></div>
    <!--todo 额外的环绕效果 值这个需要显示出按钮的代码 不需要点击复制-->
    <div ms-include-src="h"  id="h"></div>
    <!--todo 表单按钮 需要显示代码 不需要点击复制-->
    <div ms-include-src="i"  id="i"></div>
    <!--各种文字样式-->
    <div ms-include-src="j"  id="g"></div>
    <!--颜色样式-->
    <div ms-include-src="k"  id="k"></div>
        </div>
    <div class="span3">
        <nav class="menu">
            <ul>
                <li><a class="" href="#a">形状与尺寸</a></li>
                <br/>
                <li><a href="#b">带边框和不带边框的按钮</a></li>
                <br/>
                <li><a href="#c">3D 按钮</a></li>
                <br/>
                <li><a href="#d">突起样式的按钮</a></li>
                <br/>
                <li><a href="#e">长阴影</a></li>
                <br/>
                <li><a href="#f">光晕效果</a></li>
                <br/>
                <li><a href="#g">堆叠按钮</a></li>
                <br/>
                <li><a href="#h">额外的环绕效果</a></li>
                <br/>
                <li><a href="#i">表单按钮</a></li>
                <br/>
                <li><a href="#j">各种文字样式</a></li>
                <br/>
                <li><a href="#k">颜色样式</a></li>


            </ul>
        </nav>
    </div>
    </div>

</div>

<!--fm-->
<script src="./src/js/avalon.js"></script>
<script src="./src/js/jquery-1.10.2.min.js"></script>


<!--soul-->
<script src="./config.js"></script>
<script src="./router.js"></script>
<script src="./include.js"></script>







</body>
</html>